<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8" />
	<link rel="stylesheet" type="text/css" th:href="@{/css/newAccount.css}" />
	<script type="text/javascript" th:src="@{/js/register.js}"></script>
	<script type="text/javascript" th:src="@{/js/jquery-3.5.1.min.js}"></script>

	<style>
		#usernameTips {
			display: inline-block;
			margin-left: 10px;
		}
		.okTips {
			color: green;
		}
		.errorTips {
			color: red;
		}
	</style>

	<script>
		$(function() {
			$('#username').on('blur', function() {
				$.ajax({
					type: 'GET',
					url: 'usernameExist?username=' + this.value,
					success: function(data) {
						if (data.trim() === 'Exist') {
							$('#usernameTips').attr('class', 'errorTips').text('invalid username');
						} else if (data.trim() === 'Not Exist') {
							$('#usernameTips').attr('class', 'okTips').text('available username');
						}
					}
				});
			});
		});

		// 如果register.js中没有定义show()函数，这里需要添加
		function show() {
			// 根据您的需求实现显示/隐藏逻辑
			$('.Information').toggle();
		}
	</script>
</head>

<body>
<div id="Catalog" class="Catalog">
	<!-- 显示注册失败的错误信息 -->
	<p style="color: red;" th:if="${signOnMsg != null}" th:text="${signOnMsg}"></p>

	<form th:action="@{/register}" method="post"  enctype="multipart/form-data">
		<p>注册</p>
		<p>
			<i><img align="middle" th:src="@{/images/user.png}" /></i>
			<input class="user" type="text" name="username" placeholder="username" id="username" />
		<div id="usernameMsg" class="usernameMsg" style="display: none;"></div>
		<span id="usernameTips"></span>
		<label></label><br />

		<i><img align="middle" th:src="@{/images/password.png}" /></i>
		<input class="user" type="password" name="password" placeholder="password" /><br />
		<label></label><br />
		<label></label><br />


		<i style=" margin-left: 10px;">头像：</i>
		<input style="" class="user" type="file" name="image" /><br />


		<i><img align="middle" th:src="@{/images/code.png}" /></i>
		<input class="user" type="text" name="code" placeholder="code" /><br />
		</p>

		<div class="whole">
			<img class="btnImg show" th:src="@{/images/down.png}" onclick="show()" />
			<label></label><br />
			<div class="Information">
				<i><img align="middle" th:src="@{/images/name.png}" /></i>
				<label></label>
				<input class="user" type="text" name="firstname" placeholder="firstname" />
				<label> | </label>
				<i><img align="middle" th:src="@{/images/name.png}" /></i>
				<label></label>
				<input class="user" type="text" name="lastname" placeholder="lastname" /><br />

				<i><img align="middle" th:src="@{/images/email.png}" /></i>
				<label></label>
				<input class="user" type="text" name="email" placeholder="email" />
				<label> | </label>
				<i><img align="middle" th:src="@{/images/phone.png}" /></i>
				<label></label>
				<input class="user" type="text" name="phone" placeholder="phone" /><br />

				<i><img align="middle" th:src="@{/images/address.png}" /></i>
				<label></label>
				<input class="user" type="text" name="address1" placeholder="address1" />
				<label> | </label>
				<i><img align="middle" th:src="@{/images/address.png}" /></i>
				<label></label>
				<input class="user" type="text" name="address2" placeholder="address2" /><br />

				<i><img align="middle" th:src="@{/images/city.png}" /></i>
				<label></label>
				<input class="user" type="text" name="city" placeholder="city" />
				<label> | </label>
				<i><img align="middle" th:src="@{/images/city.png}" /></i>
				<label></label>
				<input class="user" type="text" name="state" placeholder="state" /><br />

				<i><img align="middle" th:src="@{/images/zip.png}" /></i>
				<label></label>
				<input class="user" type="text" name="zip" placeholder="zip" />
				<label> | </label>
				<i><img align="middle" th:src="@{/images/country.png}" /></i>
				<label></label>
				<input class="user" type="text" name="country" placeholder="country" /><br />

				<i><img align="middle" th:src="@{/images/langpref.png}" /></i>
				<label></label>
				<input class="user" type="text" name="langpref" placeholder="langpref" />
				<label> | </label>
				<i><img align="middle" th:src="@{/images/favcategory.png}" /></i>
				<label></label>
				<input class="user" type="text" name="favcategory" placeholder="favcategory" /><br />

				<label></label><br />
			</div>
		</div>
		<input type="submit" value="注册" />
		<div class="code">
			<img th:src="@{/code + '?r=' + ${#dates.format(#dates.createNow(), 'yyyyMMddHHmmss')}}" name="checkcode" onclick="this.src='/code?r=' + Math.random()" />
		</div>
	</form>
</div>
</body>
</html>



